<template>
    <section class="wrapper">
		<div id="operation">
			<div class="top-edit">
				<el-button size="small" @click="add" icon="el-icon-plus">添加</el-button>
				<el-button size="small" @click="reFresh"><i class="fa fa-refresh"></i> 刷新</el-button>
			</div>
			
			<el-dialog @close="()=>{this.dialogRoleName = false}" title="详情" :visible.sync="dialogRoleName" size="tiny">
				<div>
					<el-row>
						<el-col :span="8" class="span-title">角色名称</el-col>
						<el-col :span="8" class="span-title">部门名称</el-col>
						<el-col :span="8" class="span-title">描述</el-col>
					</el-row>
					<el-row>
						<el-col :span="8" class="span-dialog">{{gridData[0].name}}</el-col>
						<el-col :span="8" class="span-dialog">{{gridData[0].departmentName}}</el-col>
						<el-col :span="8" class="span-dialog">{{gridData[0].description}}</el-col>
					</el-row>
				</div>
			</el-dialog>
		</div>
		<div class="department-box">
			<div class="tree-title">请选择部门</div>
			<el-tree
					:data="regions"
					:props="props"
					:load="loadNode"
					@node-click="handleNodeClick"
					check-strictly
					highlight-current
					lazy
					@check-change="handleCheckChange"
					id="dep-tree"
					node-key="id">
			</el-tree>
		</div>

		<el-table
				id="role-table"
				height="560"
				:data="roleData">
			<el-table-column
					prop="name"
					label="角色名称">
			</el-table-column>
			<el-table-column
					prop="description"
					label="角色描述">
			</el-table-column>
			<el-table-column
					fixed="right"
					label="操作"
					width="250">
				<template scope="scope">
					<el-button size="mini" type="primary" icon="el-icon-info" @click="detailsRol(scope.row.id)">详情</el-button>
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row.id)" >编辑</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click.native.prevent="deleteRow(scope.$index, roleData,scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

	</section>

</template>

<script>
	import Vue from 'vue';
    import {  mapActions, mapMutations} from 'vuex';
    import {Row, Table, TableColumn,button,checkbox,icon ,dialog,Pagination,Tree,Tag,Tooltip} from 'element-ui';
    import { MessageBox,Message} from 'element-ui';
    import { ACTIVEINDEX } from '../../../store/mutation-types/left-menu/index'
    import axios from '~/plugins/axios';


	Vue.use(Row);
	Vue.use(Table);
	Vue.use(TableColumn);
	Vue.use(button);
	Vue.use(checkbox);
	Vue.use(icon);
	Vue.use(dialog);
    Vue.use(Pagination);
    Vue.use(Tree);
    Vue.use(Tag);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
        components: {}, 
        methods: {
            ...mapActions([
                'queryRole',
                'deleteRole'

            ]),
            reFresh(){
            	this.getJson(0).then((ret)=>{
                  this.regions = ret.data.data;
                })
                this.getRoleList(1).then((ret) => {
	                this.roleData = ret.data.data.list
	            });
            },
            handleClick() {

            },
			add(depId){
                this.$router.push({path:'/power/role-management/add', name: 'power-role-management-add', params: { depId: depId }})
			},
			edit(id){
                this.$router.push({path:'/power/role-management/edit', name: 'power-role-management-edit', params: { id: id }})

            },
            deleteRow(index, rows ,id) {

                this.$confirm('确定要删除角色吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    rows.splice(index, 1);
                    this.deleteRol(id);
                }).catch(() => {});
            },
            deleteRol(id){
                var _this = this
                this.deleteRole({'id':id}).then((response) => {
                    if(response.data.code === 0){
                        _this.$message('删除成功')
                    }
                    else{
                        _this.$message('删除失败')
                    }

                });
            },
            detailsRol(id){
			    var _this = this
                /*this.queryRole({'id':id}).then((response) => {
                    _this.gridData[0] = response.data.data
                    _this.dialogRoleName = true
                });*/
			},

            handleCheckChange(data, checked, indeterminate) {
            },
            handleNodeClick(data) {
                var _this = this

                this.getRoleList(data.id||0).then((ret)=>{
                    _this.roleData = ret.data.data.list
                })
            },
            loadNode(node, resolve) {
                var _this = this
                this.getJson(node.data.id||0).then((ret)=>{
                    return resolve(ret.data.data);
                })
            },

            getJson(id){
                return axios.get(process.env.baseUrl + '/department/list', {params:{parentId:id
                }})
            },
			getRoleList(id){
                var _this = this;
                return axios.get(process.env.baseUrl + '/departmentrole/list', {params:{departmentId:id,size:0
                }})
			}
        },
		data () {
			return {
                regions: [],
                'check-strictly':true,
                'highlight-current':true,
                props: {
                    label: 'name',
                    children: 'zones'
                },
                count: 1,


                checked: true,
                roleData:[
					{
					    departmentId: 1,
						description: "",
						gmtCreate: 1490609153000,
						gmtModify: 1490609153000,
						id: 1,
						level: 18,
						name: ""
					}
				],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },


                gridData: [{
						name: '销售副总裁',
						departmentId: null,
                    	description: ''
				}],
                dialogRoleName: false,
			  }
		},
		created() {
            var _this = this;
			this.$store.commit(ACTIVEINDEX , {activeIndex : '2-2'});
            this.getJson(0);
            this.getRoleList(1).then((ret) => {
                _this.roleData = ret.data.data.list
            });
		}
	}

</script>
<style>
	#role-table{width: 60%;float: right;border-top: none}
	#dep-tree{
		min-height: 520px;
	}
	.department-box{width: 36%;float: left;}
	.tree-title{margin:0; background: #eef1f6; line-height: 40px;height: 40px;text-indent: 20px;font-size: 14px; font-weight: bold; border: 1px solid #DFE6EC;border-bottom: none;border-top: none;}
	.span-title{background: #eef1f6;line-height: 48px;text-align: center;}
	.span-dialog{line-height: 48px;text-align: center;}
	.top-edit{
        padding: 10px 10px;
        text-align: left;
        border:1px solid #DFE6EC;
    }
    .top-edit button{
        margin:0 10px;
    }
</style>
